<template>
  <div class="app-container">
    <!-- 数据表格 -->
    <el-card class="box-card">
      <el-table :data="dataList" v-loading="loading" border style="width: 100%;">
        <el-table-column label="招标编号" prop="id" show-overflow-tooltip align="center" min-width="200" />
        <el-table-column label="招标标题" prop="zbbt" show-overflow-tooltip align="center" min-width="200" />
        <el-table-column label="招标描述" prop="zbms" show-overflow-tooltip align="center" min-width="300" />
        <el-table-column label="招标文件" prop="zbwj" show-overflow-tooltip align="center" min-width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.zbwj" type="text" @click="handlePreviewFiles(scope.row.zbwj.split(','))">
              预览文件
            </el-button>
            <span v-else>暂无文件</span>
          </template>
        </el-table-column>
        <el-table-column label="开始日期" prop="ksrq" show-overflow-tooltip align="center" min-width="150" />
        <el-table-column label="结束日期" prop="jsrq" show-overflow-tooltip align="center" min-width="150" />
        <el-table-column label="投标次数" prop="tbcs" show-overflow-tooltip align="center" min-width="100" />
        <!-- <el-table-column label="状态" prop="status" show-overflow-tooltip align="center" min-width="150" /> -->
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="openToubiaoDialog(scope.row)">投标</el-button>
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 文件预览对话框 -->
    <el-dialog title="文件预览" :visible.sync="previewDialogVisible" width="80%">
  <el-carousel v-if="previewFiles.length > 0" height="600px">
    <el-carousel-item v-for="(file, index) in previewFiles" :key="index">
      <!-- 判断是否为图片 -->
      <el-image v-if="isImage(file)" :src="file" style="width: 100%; height: 100%; object-fit: contain;" />
      <!-- 判断是否为 PDF -->
      <div v-else-if="isPdf(file)" class="iframe-container">
        <iframe :src="file" class="iframe-preview"></iframe>
      </div>
      <!-- 其他文件类型 -->
      <div v-else style="text-align: center; padding: 20px;">
        <a :href="file" target="_blank">查看</a>
      </div>
    </el-carousel-item>
  </el-carousel>
  <div v-else>暂无文件可预览</div>
</el-dialog>

    <!-- 投标对话框 -->
    <el-dialog title="投标" :visible.sync="toubiaoDialogVisible" width="40%">
      <el-form :model="toubiaoForm" ref="toubiaoFormRef" label-width="100px">
        <el-form-item label="投标金额" prop="sfje">
          <el-input v-model="toubiaoForm.sfje" placeholder="请输入投标金额" />
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload :action="uploadUrl" :file-list="toubiaoForm.fileList" :on-success="handleUploadSuccess"
            :on-remove="handleUploadRemove" list-type="text">
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">支持单个或多个文件上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toubiaoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitToubiao">提交</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog title="详情信息" :visible.sync="detailDialogVisible" width="60%">
      <div v-if="detailData" class="detail-container">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <p><strong>招标编号：</strong>{{ detailData.id }}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <p><strong>招标标题：</strong>{{ detailData.zbbt }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <p><strong>开始日期：</strong>{{ detailData.ksrq }}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <p><strong>结束日期：</strong>{{ detailData.jsrq }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <p><strong>招标文件：</strong>
                <span v-if="detailData.zbwj">
                  <el-button type="text" @click="handlePreviewFiles(detailData.zbwj.split(','))">预览文件</el-button>
                </span>
                <span v-else>暂无文件</span>
              </p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <p><strong>招标描述：</strong></p>
              <mavon-editor v-model="detailData.zbms" defaultOpen="preview" :toolbarsFlag="false" :subfield="false"
                :preview="true" style="border: none; background: transparent;"></mavon-editor>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else>暂无详情数据</div>
    </el-dialog>
  </div>
</template>

<script>
import { listZbz, sysTbadd } from "@/api/zbtable"; // 假设你有一个 API 文件来处理数据请求
export default {
  data() {
    return {
      uploadUrl: `${import.meta.env.VITE_APP_BASE_API}/file/upload?source=album-cover`,
      loading: false,
      dataList: [],
      previewDialogVisible: false,
      previewFiles: [], // 存储需要预览的文件列表
      toubiaoDialogVisible: false, // 控制投标弹窗的显示
      detailDialogVisible: false, // 控制详情弹窗的显示
      detailData: null, // 存储详情数据
      toubiaoForm: {
        id: '', // 招标ID
        zbbt: '', // 招标标题
        sfje: '', // 投标金额
        tbwj: '', // 投标文件
        fileList: [], // 上传的文件列表
      },
      timer: null, // 定时器
    };
  },
  methods: {
    // 获取招标数据列表
    getList() {
      this.loading = true;
      listZbz()
        .then((response) => {
          this.dataList = response.data;
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
          this.loading = false;
        });
    },
    // 预览文件
    handlePreviewFiles(fileUrls) {
      if (!fileUrls || fileUrls.length === 0) {
        this.$message.warning("暂无文件可预览");
        return;
      }
      this.previewFiles = fileUrls;
      this.previewDialogVisible = true;
    },
    // 判断是否为图片
    isImage(fileUrl) {
      return /\.(png|jpe?g|gif|bmp|webp)$/i.test(fileUrl);
    },
    // 判断是否为 PDF
    isPdf(fileUrl) {
      return /\.pdf$/i.test(fileUrl);
    },
    // 打开投标弹窗
    openToubiaoDialog(row) {
      this.toubiaoForm.zbbt = row.zbbt;
      this.toubiaoForm.id = row.id;
      this.toubiaoForm.sfje = '';
      this.toubiaoForm.fileList = [];
      this.toubiaoDialogVisible = true;
    },
    // 上传文件成功
    handleUploadSuccess(response, file, fileList) {
      this.toubiaoForm.fileList = fileList.map((item) => item.response?.data || item.url);
      this.$message.success("文件上传成功");
      this.toubiaoForm.tbwj = this.toubiaoForm.fileList.join(",");
    },
    // 移除文件
    handleUploadRemove(file, fileList) {
      this.toubiaoForm.fileList = fileList.map((item) => item.response?.data || item.url);
      this.$message.info("文件已移除");
    },
    // 提交投标
    submitToubiao() {
      if (!this.toubiaoForm.sfje || this.toubiaoForm.fileList.length === 0) {
        this.$message.error("请填写完整的投标信息");
        return;
      }
      const payload = {
        tbwj: this.toubiaoForm.tbwj,
        zbbt: this.toubiaoForm.zbbt,
        sfje: this.toubiaoForm.sfje,
        files: this.toubiaoForm.fileList.join(","),
        zbid: this.toubiaoForm.id, // 招标ID
      };
      sysTbadd(payload)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success("投标成功！");
            this.toubiaoDialogVisible = false;
            this.getList(); // 刷新列表
          } else {
            this.$message.error("投标失败，请重试！");
          }
        })
        .catch((error) => {
          console.error("投标失败:", error);
          this.$message.error("投标失败，请重试！");
        });
    },
    // 打开详情弹窗
    handleDetail(row) {
      this.detailData = row;
      this.detailDialogVisible = true;
    },
    handleEditorChange(content) {
      this.form.zbms = this.escapeHtml(content); // 保存转义后的内容
    },
    escapeHtml(html) {
      const div = document.createElement('div');
      div.innerText = html;
      return div.innerHTML;
    },
  },
  mounted() {
    this.getList();

    // 设置定时器，每两分钟调用一次 getList
    this.timer = setInterval(() => {
      this.getList();
    }, 30 * 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.dialog-footer {
  text-align: right;
}

.el-dialog {
  font-size: 14px;
  line-height: 1.8;
}

.detail-container {
  font-size: 14px;
  line-height: 1.8;
}

.detail-container p {
  margin: 0;
}

.detail-item {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.el-dialog__body {
  padding: 20px;
}

.el-row {
  margin-bottom: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}
.iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iframe-preview {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
